<route>
{
    name: 'dashboard',
    meta: {
        title: "控制台"
    }
}
</route>

<script setup>
import { getNowlist } from "@/api/biz/bizAccountType";
import { findStatic } from "@/api/biz/bizHousingInfo";
import { importlist, getRubbishTypeStatement } from "@/api/biz/bizRubbishType";
import { download, addDateRange } from "@/utils/aidex";
import * as echarts from "echarts";

import { onMounted } from "vue";
const data = ref({
  indexData: {},
  timeType: "d",
  rigthData: {},
  rubbishTypeStatementDate: {},
  rubbishTypeStatementDateX: [],
  rubbishTypeStatementDateY: [], // 金额
  rubbishTypeStatementDateY: [], // 重量
  searchDate: []
});
function open(url) {
  window.open(url, "top");
}
onMounted(() => {
  getfindStatic();
  getRightData("d");
  findRubbishTypeStatement("");
});
function getRightData(timeType) {
  data.value.timeType = timeType;
  getNowlist({ timeType: data.value.timeType }).then((res) => {
    data.value.rigthData = res.data || {};
  });
}
function findRubbishTypeStatement(timeType) {
  data.value.timeType = timeType;
  getRubbishTypeStatement({ timeType: data.value.timeType }).then((res) => {
    data.value.rubbishTypeStatementDate = res.data || {};
    console.log(data.value.rubbishTypeStatementDate);
    data.value.rubbishTypeStatementDateY =
      data.value.rubbishTypeStatementDate.map((item) => {
        return item.allAccount;
      });
    data.value.rubbishTypeStatementDateW =
      data.value.rubbishTypeStatementDate.map((item) => {
        return item.allWeight;
      });
    data.value.rubbishTypeStatementDateX =
      data.value.rubbishTypeStatementDate.map((item) => {
        return item.name;
      });
    setTimeout(() => {
      statics();
    }, 1000);
  });
}
function importData() {
  var params = {};
  if (data.value.searchDate.length == 0) {
    ElMessage.warning({ message: "请选择时间段", center: true });
    return;
  }
  ElMessageBox.confirm("您确认要导出数据吗？", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      importlist(addDateRange(params, data.value.searchDate)).then((res) => {
        download(res.msg);
      });
    })
    .catch(() => {});
}
function statics() {
  console.log("11 ww");
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      containLabel: true
    },
    legend: {
      data: ["类别", "金额"]
    },
    toolbox: {
      show: true,
      feature: {
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    xAxis: {
      type: "category",
      data: data.value.rubbishTypeStatementDateX,
      axisLabel: {
        showMaxLabel: true,
        interval: 0,
        rotate: 40
      }
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: data.value.rubbishTypeStatementDateW,
        type: "bar",
        color: "#67c23a",
        name: "类别",
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" }
          ]
        }
      },
      {
        data: data.value.rubbishTypeStatementDateY,
        type: "bar",
        color: "#409eff",
        name: "金额",
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" }
          ]
        }
      }
    ]
  };
  myChart.setOption(option);
}
function getfindStatic() {
  findStatic().then((res) => {
    console.log(res.data);
    data.value.indexData = res.data;
  });
}
function getFormatMoney(num, point = 2) {
  if (!num) {
    num = 0.0;
  }
  num = Number(num).toFixed(2);
  let numStr = num.toString().split(".")[0];
  console.log("123", numStr);
  if (numStr.length < 5) {
    // 判断数字有多长,若是小于6,,表示10万之内的数字,让其直接显示
    console.log(numStr);
    return numStr;
  } else if (numStr.length >= 5 && numStr.length <= 8) {
    // 若是数字大于6位,小于8位,让其数字后面加单位万
    let decimal = numStr.substring(
      numStr.length - 4,
      numStr.length - 4 + point
    );
    console.log(decimal);
    // 由千位,百位组成的一个数字
    return parseFloat(parseInt(num / 10000) + "." + decimal) + "万";
  } else if (numStr.length > 8) {
    // 若是数字大于8位,让其数字后面加单位亿
    let decimal = numStr.substring(
      numStr.length - 8,
      numStr.length - 8 + point
    );
    console.log(decimal);
    return parseFloat(parseInt(num / 100000000) + "." + decimal) + "亿";
  }
}
</script>

<template>
  <div>
    <page-header title="欢迎使用禾汇初味商城管理平台">
      <template #content>
        <div>
          <!-- <div style="margin-bottom: 5px">
            这是一款<b class="text-emphasis">开箱即用</b
            >的中后台框架，同时它也经历过数十个真实项目的技术沉淀，确保框架在开发中可落地、可使用、可维护
          </div>
          <div>
            注：在作者就职过的公司，本框架已在电商、直播、OA、ERP等多个不同领域的中后台系统中应用并稳定运行
          </div> -->
        </div>
      </template>
    </page-header>
    <el-row
      style="
        margin: 0 10px;
        background-color: #fff;
        padding: 20px;
        height: calc(100vh - 230px);
      "
    >
      <el-col :span="24">
        <el-row :gutter="20">
          <el-col :span="3">
            <el-card shadow="always">
              <div class="tj-card">
                <div class="card-tis">小区统计</div>
                <div class="card-main">
                  <div class="left">
                    <el-icon color="#409EFC" class="no-inherit">
                      <svg-icon name="ep:school" />
                    </el-icon>
                  </div>
                  <div class="right">
                    {{ data.indexData.allHousing }} <span>个</span>
                  </div>
                </div>
                <div class="card-footer">
                  本月新增：{{ data.indexData.monthHousing }}个
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card shadow="always">
              <div class="tj-card">
                <div class="card-tis">驿站统计</div>
                <div class="card-main">
                  <div class="left">
                    <el-icon color="#409EFC" class="no-inherit">
                      <svg-icon name="ant-design:api-filled" />
                    </el-icon>
                  </div>
                  <div class="right">
                    {{ data.indexData.allEqu }} <span>个</span>
                  </div>
                </div>
                <div class="card-footer">
                  本月新增：{{ data.indexData.monthEqu }}个
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="7">
            <el-card shadow="always">
              <el-row>
                <el-col :span="6">
                  <div class="tj-card">
                    <div class="card-tis">会员统计</div>
                    <div class="card-main">
                      <div class="left"></div>
                      <div class="right">
                        {{ data.indexData.allUserInfo }} <span>个</span>
                      </div>
                    </div>
                    <div class="card-footer card-footer-noborder">全部会员</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="tj-card">
                    <div class="card-tis">&nbsp;</div>
                    <div class="card-main">
                      <div class="left"></div>
                      <div class="right">
                        {{ data.indexData.todayUserInfo }} <span>个</span>
                      </div>
                    </div>
                    <div class="card-footer card-footer-noborder">今日新增</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="tj-card">
                    <div class="card-tis">&nbsp;</div>
                    <div class="card-main">
                      <div class="left"></div>
                      <div class="right">
                        {{ data.indexData.tomorrowUserInfo }} <span>个</span>
                      </div>
                    </div>
                    <div class="card-footer card-footer-noborder">昨日新增</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="tj-card">
                    <div class="card-tis">&nbsp;</div>
                    <div class="card-main">
                      <div class="left"></div>
                      <div class="right">
                        {{ data.indexData.monthUserInfo }}<span>个</span>
                      </div>
                    </div>
                    <div class="card-footer card-footer-noborder">本月新增</div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="11">
            <el-card shadow="always">
              <el-row>
                <el-col :span="8">
                  <div class="tj-card">
                    <div class="card-tis">金额统计</div>
                    <div class="card-main">
                      <div class="left"></div>
                      <div class="right">
                        {{ getFormatMoney(data.indexData.zongfafen) }}
                        <span>元</span>
                      </div>
                    </div>
                    <div class="card-footer card-footer-noborder">
                      总下单金额
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="tj-card">
                    <div class="card-tis">&nbsp;</div>
                    <div class="card-main">
                      <div class="left"></div>
                      <div class="right">
                        {{ getFormatMoney(data.indexData.zongtixian) }}
                        <span>元</span>
                      </div>
                    </div>
                    <div class="card-footer card-footer-noborder">总积分</div>
                  </div>
                </el-col>

                <el-col :span="8">
                  <div class="tj-card">
                    <div class="card-tis">&nbsp;</div>
                    <div class="card-main">
                      <div class="left"></div>
                      <div class="right">
                        {{ getFormatMoney(data.indexData.userInfoyue) || 0.0 }}
                        <span>元</span>
                      </div>
                    </div>
                    <div class="card-footer card-footer-noborder">总余额</div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" style="margin-top: 0">
            <el-card shadow="always">
              <template #header>
                <div class="card-header">
                  <span>下单统计</span>
                  <el-button-group>
                    <div style="float: left; margin-right: 20px">
                      <el-date-picker
                        type="daterange"
                        range-separator="至"
                        start-placeholder="导出开始时间"
                        end-placeholder="导出结束时间"
                        value-format="YYYY-MM-DD"
                        v-model="data.searchDate"
                      />
                    </div>

                    <el-button @click="getRightData('d')">今日统计</el-button>
                    <el-button @click="getRightData('w')">本周统计</el-button>
                    <el-button @click="getRightData('m')">本月统计</el-button>
                    <el-button type="primary" @click="importData">
                      <template #icon>
                        <el-icon>
                          <svg-icon name="ep:search" />
                        </el-icon>
                      </template>
                      导出数据</el-button
                    >
                  </el-button-group>
                </div>
              </template>

              <el-row :gutter="20">
                <el-col :span="20">
                  <div style="width: 80%; height: 480px" id="main"></div
                ></el-col>

                <el-col :span="4">
                  <div class="money_tongji">
                    <h2>
                      <span v-if="data.timeType == 'd'">今日数据</span>
                      <span v-if="data.timeType == 'w'">本周数据</span>
                      <span v-if="data.timeType == 'm'">本月数据</span>
                    </h2>
                    <div class="quanbu">
                      <div class="money">
                        ¥
                        {{ data.rigthData.balance || 0.0 }}
                      </div>
                      <div class="title">下单金额</div>
                    </div>

                    <!-- <div class="quanbu">
                      <div class="money">
                        ¥ {{ data.rigthData.tixian || 0.0 }}
                      </div>
                      <div class="title">提现金额</div>
                    </div>

                    <div class="quanbu">
                      <div class="money">
                        ¥ {{ data.rigthData.duihuan || 0.0 }}
                      </div>
                      <div class="title">兑换金额</div>
                    </div>

                    <div class="quanbu">
                      <div class="money">
                        ¥ {{ data.rigthData.xianxia || 0.0 }}
                      </div>
                      <div class="title">线下付款</div>
                    </div> -->
                  </div></el-col
                >
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.header .main .title {
  font-size: 32px;
  font-weight: bold;
}
// 边框
.el-card.is-always-shadow {
  box-shadow: 0 0 12px rgb(235 235 235 / 35%) !important;
  border: 1px solid #fff !important;
}

.money_tongji {
  width: 180px;
  height: auto;
  box-shadow: 0 0 12px rgb(235 235 235 / 35%) !important;
  padding: 20px;
  .quanbu {
    padding: 10px 0;
    .money {
      font-size: 20px;
      font-weight: 800;
      color: #e60000;
    }
    .title {
      font-size: 14px;
      color: #999;
    }
  }
}
.text-emphasis {
  text-emphasis-style: "❤";
}
.ecology {
  padding: 10px 0 0;
  &.vue {
    h1 {
      color: #41b883;
    }
  }
  &.fa {
    h1 {
      color: #e60000;
    }
  }
  &.osa {
    h1 {
      color: #67c23a;
    }
  }
  .main {
    text-align: center;
    img {
      display: block;
      margin: 0 auto;
    }
    h1 {
      margin: 10px auto 0;
      text-align: center;
    }
    h2 {
      font-size: 16px;
      font-weight: normal;
      color: var(--el-text-color-secondary);
      text-align: center;
    }
  }
  .el-carousel {
    box-shadow: var(--el-box-shadow-light);
    transition: var(--el-transition-box-shadow);
  }
  ul li {
    line-height: 28px;
  }
}
.question {
  .answer {
    margin: 20px 0 0;
    padding-left: 20px;
    font-size: 16px;
    color: var(--el-text-color-secondary);
    li {
      margin-bottom: 10px;
      line-height: 1.5;
      &:last-child {
        margin-bottom: 0;
      }
    }
    span {
      color: var(--el-text-color-primary);
      font-weight: bold;
    }
  }
}
.tj-card {
  .card-tis {
    font-size: 16px;
    line-height: 20px;
    color: #666;
  }
  .card-footer {
    border-top: 1px solid #eee;
    line-height: 180%;
    padding-top: 10px;
    color: #666;
  }
  .card-footer-noborder {
    border-top: 1px solid #fff;
    line-height: 180%;
    padding-top: 10px;
    color: #666;
    text-align: center;
  }
  .card-main {
    display: flex;
    justify-content: space-between;
    align-items: end;
    .right {
      font-size: 20px;
      font-weight: 800;
      span {
        font-size: 14px;
      }
    }
  }
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
